<template>
  <el-form
    :class="['form-base-setting']"
    ref="baseSettingRef"
    :model="dsgnItem"
    :rules="formRules"
    label-width="100px"
    v-loading="formLoading"
  >
    <el-form-item label="标题">
      <el-input v-model="dsgnItem.name" clearable placeholder="Please enter name" />
    </el-form-item>
    <el-form-item label="描述">
      <el-input
        type="textarea"
        rows="4"
        v-model="dsgnItem.remark"
        clearable
        placeholder="请输入描述"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">

// import {useApprovalDesignerStore} from "@/store/modules/dsgn/ApprovalDesigner";

import { PropType } from 'vue'
import {  CenterVO } from '@/api/res/ResCenter'

defineOptions({
  name: 'FormBaseSetting'
})

const props = defineProps({
  dsgnItem: {
    type: Object as PropType<CenterVO | null>,
    required: true
  }
})
// const props= defineProps({
//   dsgnItem: {
//     type: Object as PropType<CenterVO,null>,
//     required: true
//   }
// })

const designerMixin = inject('designerMixin')
if (!designerMixin) {
  throw new Error('designerMixin is not provided')
}



const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formRules = reactive({})


const dsgnItem = ref(props.dsgnItem);

//
// const dsgnId = designerMixin.getResId()
//
// const message = useMessage() // 消息弹窗
//
//
//
// const baseSettingRef = ref() // 表单 Ref
//
// //
//
// // const designerStore = useApprovalDesignerStore()
// const basicInfo = ref(designerMixin.getBasicInfo());


// const dsgnItem= ref(designerMixin.getDsgnItem());

//
// const remark = ref(dsgnItem.value.remark);
//
//
// // 定义计算属性 title
// const title = computed({
//   get() {
//     return basicInfo.value.title;
//   },
//   set(value) {
//     basicInfo.value.title = value;
//   }
// });

// // 定义计算属性 remark
// const remark = computed({
//   get() {
//     return dsgnItem.value.remark;
//   },
//   set(value) {
//     dsgnItem.value.remark = value;
//   }
// });

// const getFormBaseSetting = () => {
//   debugger
//   return dsgnItem.value;
// }
//
// defineExpose({ getFormBaseSetting}) // 提供 open 方法，用于打开弹窗

</script>

<style scoped lang="scss">
.form-base-setting {
  max-width: 800px;
  min-height: calc(80vh);
  display: flex;
  flex-direction: column;
  //align-items: center;
  //justify-content: center;
  margin: 0 auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-form-item {
    margin-top: 10px;
  }
}
</style>
